import React, { Component } from 'react';
import { View, Text, Image, StatusBar } from 'react-native';
import {pxToDp} from "../../../utils/styleKits";
import { Input } from 'react-native-elements'; 
import validator from "../../../utils/validator";
import request from "../../../utils/request";
import { ACCOUNT_LOGIN  } from "../../../utils/pathMap";

export default class index extends Component {
  constructor(props){
    super(props)
    this.state = {
      phoneNum: '',
      validflag: true,
    } 
  }
  
  phoneNumChange=(value)=>{
      this.setState({
        phoneNum: value
      });
    console.log(value);

    console.log(this.state.phoneNum);
    }

  submitPhoneNum= async()=>{
    const { phoneNum } = this.state;
    const validflag = validator.validatePhone(phoneNum);
    if(!validflag){
      this.setState({ validflag });
      return;
    }

    const res = await request.post(ACCOUNT_LOGIN, {phone:phoneNum});
    console.log(res);

  }
  render() {
    const { phoneNum, validflag } = this.state;
    return (
      <View>
          <StatusBar backgroundColor="transparent" translucent={true} />
            <Image style={{ width: "100%", height:pxToDp(250)}} source={require("../../../res/Login.jpeg")} />
        <View style={{padding: pxToDp(20),}}>
            <View>
                <View><Text style={{fontSize:pxToDp(25),color:'#888',fontWeight:'bold'}}>手机号登录注册</Text></View>
                <View style={{marginTop:pxToDp(30)}}>
                    <Input
                        maxLength={11}
                        keyboardType="phone-pad"
                        value={phoneNum}
                        inputStyle={{color:'#888'}}
                        onChangeText={this.phoneNumChange}
                        errorMessage={validflag ? "":"手机号码格式不正确"}
                        onSubmitEditing={this.submitPhoneNum}
                        placeholder='请输入手机号码'
                        leftIcon={{ type: 'font-awesome', name: 'phone', color: '#ccc', size: pxToDp(20) }}
                    />
                </View>
            </View>
        </View>
      </View>
    );
  }
}
